// 原生实现上传函数
function upload(method, url, file, onUpload, onDownload, onFinish, onError) {
    let xhr = new XMLHttpRequest();
    // 上传进度
    xhr.upload.onprogress = function (e) {
        let percent = Math.floor((e.loaded / e.total) * 100);
        onUpload(percent);
    }
    xhr.onprogress = function (e) {
        let percent = Math.floor((e.loaded / e.total) * 100);
        onDownload(percent);
    }
    // 请求完成
    xhr.onload = function () {
        if (this.status != 200) {
            onError(this.status);
        } else {
            let res = JSON.parse(this.responseText);
            onFinish(res);
        }
    }
    // 请求报错
    xhr.onerror = function () {
        onError(this.status);
    }

    xhr.open(method, url);
    xhr.setRequestHeader('Accept', 'application/json, text/plain, */*')

    let form = new FormData()
    form.append('image', file)
    xhr.send(form);

    return xhr;
}

function formatBytes(bytes) {
    let units = ["B", "KB", "MB", "GB", "TB"];
    let index = 0;
    let num = bytes;
    // 如果字节数大于等于1024，并且单位索引小于数组长度，就继续循环
    while (num >= 1024 && index < units.length) {
        num = num / 1024;
        index++;
    }
    // 返回格式化后的字符串，保留一位小数，并加上对应的单位
    return num.toFixed(1) + " " + units[index];
}

/** 文件列表的容器 */
const box = document.querySelector('.echo_container ul');
/** 允许上传的文件类型 */
const allowExt = [".png", ".jpg", '.jpeg'];
/** 允许上传的文件大小 */
const baseSize = 15;
const allowSize = baseSize * 1024 * 1024;

function fileHandler(files) {
    if (files.length > 1) return ('仅支持单文件上传');

    let file = files[0];

    if (file == null || file == "") {
        // alert("请选择要上传的文件!");
        return false;
    }

    // 验证文件类型是否符合要求
    let extName = file.name.substring(file.name.lastIndexOf("."));
    if (!allowExt.includes(extName)) {
        let errMsg = "该文件不允许上传，请上传" + allowExt.join('，') + "类型的文件,当前文件类型为：" + extName;
        alert(errMsg);
        return;
    }

    // 准备回显信息的元素
    let li = document.createElement('li');
    let echo = `<div class="before">
            <div class="file_name">${file.name}</div>
            <div class="file_size">${formatBytes(file.size)}</div>
        </div>
        <div class="progress">
            <span></span>
            <i></i>
        </div>
        <div class="after disabled">
            <div class="file_size"></div>
            <div class="percent"></div>
            <a download href="" class="download">下载</a>
        </div>`;
    li.innerHTML = echo;
    box.appendChild(li);

    /** 获取要回显信息的元素 */
    /** 进度条 */
    let bar = li.querySelector('.progress span'),
        barText = li.querySelector('.progress i'),
        /** 下载相关信息栏目 */
        col = li.querySelector('.after'),
        /** 下载按钮 */
        btn = li.querySelector('.download'),
        newSize = li.querySelector('.after .file_size'),
        percent = li.querySelector('.percent');

    // 验证文件大小是否符合要求
    let oldSize = file.size;
    if (oldSize > allowSize) {
        barText.innerText = `文件过大(Max${baseSize}MB)`;
        bar.className = 'error';
        return;
    }

    let ajax = new upload(
        'POST',
        '/upload',
        file,
        function (percent) {
            // 渲染进度条
            barText.innerText = '上传中...';
            bar.style.width = percent + '%';
        },
        function (percent) {
            // 渲染进度条
            barText.innerText = '压缩中...';
            bar.style.width = percent + '%';
        },
        function (res) {
            col.className = 'after';
            barText.innerText = '压缩完成';
            btn.href = res.data[0].url;
            newSize.innerText = formatBytes(res.data[0].size);
            let text = ((oldSize - res.data[0].size) / oldSize * 100).toFixed(2);
            percent.innerText = (text >= 0 ? '−' : '+') + Math.abs(text) + '%';
        },
        function (res) {
            barText.innerText = '上传失败';
            bar.className = 'error';
        }
    )

    document.querySelector('#upload').value = '';
}

// 处理手动选择文件
document.querySelector('#upload').onchange = function () {
    fileHandler(this.files)
}

// 处理拖拽上传
let dropBox = document.querySelector('.dropBox');
dropBox.addEventListener('dragenter', function (e) { e.preventDefault() });
dropBox.addEventListener('dragover', function (e) { e.preventDefault() });
dropBox.addEventListener('drop', drop)

function drop(e) {
    e.stopPropagation(); //阻止事件冒泡
    e.preventDefault();//阻止默认事件 (上面的都一样)
    //拿到拖拽的文件
    let file = e.dataTransfer.files
    //调用函数传递文件的内容,然后进行解析转化为bas64格式的内容
    fileHandler(file);
}
